<template>
  <el-header class="bg-[#e5e5e5] text-left text-[16px] leading-[60px]  text-gray-500">
    <!-- 左侧：折叠菜单的控制按钮 -->
    <el-row class=" flex items-center">
      <el-col :span="6">
        <div class="flex items-center gap-4 ">
          <el-button @click="toggleAside">
            <el-icon color="rgb(56,18,110)" size="large">
              <component :is="toggleIcon" />
            </el-icon>
          </el-button>
          <a href="/homePage" target="_blank">亿购网首页</a>
          <button  onclick="location.reload()">刷新</button>
        </div>
      </el-col>

      <!-- 右侧： 登录的信息信息 -->
      <el-col :span="18" style="text-align: right;">
        <el-dropdown>
          <span class="el-dropdown-link">
            <!-- <span>Welcome,</span> -->
            <el-icon>
              <Avatar />
            </el-icon>
            <span style="margin:0 10px;">{{ userInfo.username }}</span>
            <el-avatar :size="60" :src="userInfo.avatar" />
          </span>
          <!-- 右上角下拉菜单 -->
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item @click="modifyMwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click="info">个人资料</el-dropdown-item> -->
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>

    </el-row>

  </el-header>
</template>

<script setup>
import {ref, computed, watch, onMounted, reactive} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useSidebarStore} from '@/stores/sidebar';
import {useTabsStore} from "@/stores/tabs"

const sidebar = useSidebarStore()
const router = useRouter()
const tabsStore = useTabsStore()
//默认是展开状态的图标
const toggleIcon = ref("Fold")
const toggleAside = () => {
  sidebar.handleCollapse()
  //修改图标
  toggleIcon.value = sidebar.isCollapse.value ? "Expand" : "Fold"
}

/***********************************
 * 登录用户信息
 */
const userInfo = reactive({
  avatar: '/src/assets/img/2.jfif',
  username: '136123445678'
})
/******
 * 把个人信息页面也添加到标签库中
 */
const info = () => {
  tabsStore.addTab({
    name: 'Info',
    title: '个人信息',
  })
  router.push({name: 'Info'})
}
/***
 * 把修改页面添加到标签库
 */
const modifyMwd = () => {
  tabsStore.addTab({
    name: 'ModifyPwd',
    title: '修改密码',
  })
  router.push({name: 'ModifyPwd'})
}


const logout = () => {
  console.log("你点击了退出按钮，页面重定向到登录页")
  localStorage.clear()
  router.push("/login")
}
</script>
<style lang="less" scoped>
// .el-header {
//   // background-color: #dbe3ec;
//   background-color: #e5e5e5;
//   color: #333;
//   text-align: left;
//   font-size:18px;
//   line-height: 60px;
// }

.el-dropdown-link {
  display: inline-flex;
  align-items: center;
}


/* 去除点击时的黑色边框 */
.el-tooltip__trigger:focus {
  outline: none; // unset 这个也行
}
</style>